<template>
  <div class="beauty">
    <div class="sales-board">
            <div class="sales-board-intro">
                <h2>鲜花美女</h2>
                <p>女人像玫瑰一样芬芳 百花美，不及红颜一醉 静如娇花映水，动如弱柳拂风 美丽的脸庞像绽放的昙花花朵皎洁饱满，光彩夺目，显得那样雍容华贵，妩媚娇丽；颤巍巍，飘飘然，芳香飘溢，恍若白衣仙女下凡。此情此景，真是让人流连忘返。。。</p>
            </div>
            <div class="sales-board-form">
                <div class="sales-board-line">
                    <div class="sales-board-line-left">
                      购买数量：
                    </div>
                    <div class="sales-board-line-right">
                      <counter @on-change="getInfo('num',$event)" :max="maxCounter" :min="minCounter"></counter>
                    </div>
                </div>

                <div class="sales-board-line">
                    <div class="sales-board-line-left">
                      包装方案：
                    </div>
                    <div class="sales-board-line-right">
                      <selector @on-packing="getInfo('package',$event)" :selections="selectorData"></selector>
                    </div>
                </div>

                <div class="sales-board-line">
                    <div class="sales-board-line-left">
                      鲜花类型：
                    </div>
                    <div class="sales-board-line-right">
                       <caketype @on-type="getInfo('type',$event)" :chooses="chooseData"></caketype>
                    </div>
                </div>

                <div class="sales-board-line">
                    <div class="sales-board-line-left">
                    </div>
                    <div class="sales-board-line-right">
                      {{ getTotalPrice }}元
                    </div>
                </div>

                <div class="sales-board-line">
                    <div class="sales-board-line-left">
                    </div>
                    <div class="sales-board-line-right">
                      <a href="javascript:;" class="button" @click="buy">立即购买</a>
                    </div>
                </div>

            </div>
            <div class="sales-board-des">
                <h3>玫瑰</h3>
                <p>与爱配料，调制魔药，亲吻花瓣之时，魔力挥散。厄瓜多尔鲜花玫瑰，诠释和见证亘古不变的爱恋。永无止境的爱情，和天长地久的真爱，属于你。</p>
                <h3>百合</h3>
                <p>
                百合花，花姿大方，花香浓郁，自古以来就广为人们喜爱，尤其是素雅、纯净如仙子的白百合。在我们中国，百合具有百年好合、美好家庭、伟大的爱之含意，代表着深深放入祝福。百合花的花语是：顺利、心想事成、祝福、高贵。
                </p>
                <h3>康乃馨</h3>
                <p>
                我想在阳光下满身花香，我想在阳光下沐浴清新，我想在清新里感受每一天的好时光，康乃馨象征温馨，代表了爱、魅力和尊敬之情。
                </p>
            </div>
        </div>
  </div>
</template>

<script>
import counter from "../../../components/counter"
import selector from "../../../components/selector"
import caketype from "../../../components/caketype"

export default {
  name:"beauty",
  data(){
    return{
      totalPrice:0,
      minCounter:0,
      maxCounter:100,
      selectorData:[
        {
          label:"简约包装",
          value:0
        },
        {
          label:"精美包装",
          value:1
        },
        {
          label:"豪华包装",
          value:2
        }
      ],
      chooseData:[
        {
          label:"玫瑰",
          value:1
        },
        {
          label:"百合",
          value:2
        },
        {
          label:"康乃馨",
          value:3
        }
      ]
    }
  },
  created(){
    this.totalPrice = 0;
  },
  components:{
    counter,
    selector,
    caketype
  },
  methods:{
    buy(){
      alert("购买成功")
    },
    // getNumber(data){
    //   this.totalPrice = data * 100;
    // },
    // getPackage(data){
    //   this.totalPrice += data * 50
    // },
    // getType(data){
    //   this.totalPrice += (data+1) * 100
    // },
    getInfo(key,data){
      this[key] = data; // num  package  type
      let buyObj = {
        "num":this.num,
        "package":this.package | 0,
        "type":this.type | 0
      }
        // this.totalPrice = buyObj.num * 100 + buyObj.package * 50 + (buyObj.type+1) * 200;
      // this.totalPrice = this.$store.getters.getPrice;
    }
  },
  computed:{
    getTotalPrice(){
      return this.$store.getters.getPrice;
    }
  }
}
</script>

<style scoped>
	.sales-board {
  background: #fff;
}
.sales-board-form {

}
.sales-board-intro h2 {font-size: 20px;
  padding: 20px;
}
.sales-board-intro p {
  background: #f7fcff;
  padding: 10px 20px;
  color: #999;
  line-height: 1.8;
}
.sales-board-form {
  padding: 30px 20px;
  font-size: 14px;
}
.sales-board-line {
  clear: both;
  padding-bottom: 20px;
}
.sales-board-line-left {
    display: inline-block;
    width: 100px;
}
.sales-board-line-right {
    display: inline-block;
    width: 75%;
}
.sales-board-des {
  border-top: 20px solid #f0f2f5;
  padding: 15px 20px;
}
.sales-board-des p {
  line-height: 1.6;
}
.sales-board-des h2 {
  font-size: 20px;
  padding-bottom: 15px;
}
.sales-board-des h3 {
  font-size: 18px;
  font-weight: bold;
  padding: 20px 0 10px 0;
}
.sales-board-des li {
  padding: 5px 0;
}
.sales-board-table {
  width: 100%;
  margin-top: 20px;
}
.sales-board-table th {
  background: #4fc08d;
  color: #fff;
}
.sales-board-table td {
    border: 1px solid #f0f2f5;
    padding: 15px;
}
h3{
  margin-top: 30px;
}
.buy-dialog-title {
  font-size: 16px;
  font-weight: bold;
}
.buy-dialog-btn {
  margin-top: 20px;
}
.buy-dialog-table {
  width: 100%;
  margin-bottom: 20px;
}
.buy-dialog-table td,
.buy-dialog-table th{
  border: 1px solid #e3e3e3;
  text-align: center;
  padding: 5px 0;
}
.buy-dialog-table th {
  background: #4fc08d;
  color: #fff;
  border: 1px solid #4fc08d;
}
.button {
  background: #4fc08d;
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
}
.button:hover {
  background: #4fc08d;
}
</style>
